import {HostListener, Component, OnInit} from '@angular/core';
import {HttpService} from "../../service/http/http.service";
import {NzMessageService} from "ng-zorro-antd/message";
import * as echarts from 'echarts';
import {ECharts} from "echarts/types/dist/echarts";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  listOfData: any[] = [];
  okLoading = false;
  chat!:ECharts;

  statistic = {
    dayNotPay:0.0,
    dayPay:0.0,
    totalPay:0.0
  }

  loadingData = false;
  total = 0;
  page = 1;

  constructor(private http:HttpService,
              private msg:NzMessageService) {

  }

  ngOnInit() {
    setTimeout(() => {
      // this.chat = echarts.init(document.getElementById('chart')!);
      // this.getList();
    }, 0);
    this.getData();
    this.getListData();
  }

  changePage(p:any){
    this.page = p;
    this.getListData();
  }

  getListData(){
    this.loadingData = true;
    let params = {
      pageNum:this.page,
      pageSize:10
    }
    this.http.get("/data/count",params).then((res:any)=>{
      this.loadingData = false;
      this.listOfData = res.ipage.records;
      this.page = res.ipage.current;
      this.total = res.ipage.total;
    })
  }


  getData(){
    this.http.get("/data/statistic",{}).then((res:any)=>{
      this.statistic = res;
    });
  }

  @HostListener('window:resize') onResize() {
    // this.chat.resize();
  }

  getList(){

    var date:string[] = [];

    var data:number[] = [];
    for (var i=0;i < 30;i++){
      date.push((i+1)+"号");
      data.push(Math.floor((Math.random() * 10 + 2 * i)));
    }
    var chartOption = {
      xAxis: {
        type: 'category',
        data: date
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data,
          type: 'line',
          smooth: true
        }
      ],
      tooltip:{
        trigger: 'item',
        axisPointer: {
          type: 'shadow'
        },
        formatter: '{b} : {c}元' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
      },
      grid: {
        top:30,
        left:10,
        bottom:0,
        right:10,
        containLabel:true
      },
    };
    this.chat.setOption(chartOption);


  }

}
